<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<!-- 控制器 -->
				<div class="actions-box">
					<div class="control-box">
						<div class="control-left">
							<div class="control-item">
								<el-button type="primary" @click="doAddProduct()" data-type="新页面">
									添加基础
								</el-button>
							</div>
							<div class="control-item">
								<el-button type="primary" @click="doAddBreed()" data-type="新页面">
									添加选配
								</el-button>
							</div>
							<div class="control-item">
								<el-button type="primary" @click="doAddPart()" data-type="新页面">
									添加配件
								</el-button>
							</div>
							<div class="control-item">
								<el-button type="primary" @click="dialogVisible = true" data-type="新页面">
									更改状态
								</el-button>
							</div>
							<div class="control-item">
								<el-button type="primary" @click="doDel()" data-type="新页面">
									批量删除
								</el-button>
							</div>
							<el-dialog title="更改状态" :visible.sync="dialogVisible" width="30%">
								<div class="input-box flex">
									<div class="label">状态</div>
									<div>
										<el-radio-group v-model="status">
											<el-radio :label="1">上架</el-radio>
											<el-radio :label="-1">下架</el-radio>
										</el-radio-group>
									</div>
								</div>

								<span slot="footer" class="dialog-footer">
									<el-button @click="dialogVisible = false">取 消</el-button>
									<el-button type="primary" @click="doStatus()">确 定</el-button>
								</span>
							</el-dialog>
						</div>
						<div class="control-right">
							<div class="action-item">
								<el-cascader v-model="cascader_cate" :options="filter_cates" :props="{
									checkStrictly: true,
									children: 'child',
									value: 'id',
									label: 'title',
								}" clearable placeholder="分类筛选"></el-cascader>
							</div>

							<div class="action-item">
								<el-select clearable="" v-model="searchParams.productType" placeholder="商品类型"
									@change="select_cate_onchange">
									<el-option v-for="item in productType_cates" :key="item.value" :label="item.title"
										:value="item.value">
									</el-option>
								</el-select>
							</div>

							<div class="action-item">
								<el-select clearable="" v-model="searchParams.status" placeholder="状态筛选"
									@change="select_cate_onchange">
									<el-option v-for="item in filter_status_cates" :key="item.value" :label="item.title"
										:value="item.value">
									</el-option>
								</el-select>
							</div>

							<div class="action-item">
								<el-cascader v-model="cascader_brand_cate" :options="filter_brand_cates" :props="{
									checkStrictly: true,
									children: 'child',
									value: 'id',
									label: 'title',
								}" clearable placeholder="品牌筛选"></el-cascader>
							</div>

							<div class="action-item">
								<el-input v-model="searchParams.keyword" clearable placeholder="请输入关键词">
									<el-button slot="append" size="small" icon="el-icon-search" @click="doSearch()">
									</el-button>
								</el-input>
							</div>
						</div>
					</div>
				</div>
				<!-- 控制器 -->

				<!-- 渲染表格 -->
				<div class="table-view">
					<w_tables ref="w_tables" @onSelectionChange="onSelectionChange" @emitTable="emitTable"
						@emitTableRowLink="emitTableRowLink" />
					<!-- <w_table ref="w_table" @emitTable="emitTable" /> -->
				</div>
				<!-- 渲染表格 -->
				<div class="table-util">
					<div class="util-left">
						<!-- 批量选择 -->
					</div>
					<div class="util-right">
						<div class="pagi-item">
							<w_pagination v-if="tableData.length" :total="total" :pagination="pagination"
								@size-change="onSizeChange" @current-change="onCurrentChange" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="设置销量" :visible.sync="visibleDialog" width="30%">
			<div>
				<el-input type="number" placeholder="请设置销量" v-model="orders" clearable>
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visibleDialog = false">取 消</el-button>
				<el-button type="primary" @click="addSales(sales.id)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- @confirm="confirmFormSubmit" -->
		<w_form_modal ref="w_form_modal" />
		<w_detail_modal ref="w_detail_modal" />
		<!--  @confirm="confirmInvoice" -->
	</div>
</template>

<script>

import { SITE_ROOT } from '@/config/env.js'

import w_detail_modal from '@/components/base/w_detail_modal.vue'
import page_config from "@/constant/product/product-list.js";
import page_mixin from "@/mixins/page_mixin.js";
export default {
	name: "product",
	mixins: [page_mixin],
	components: {
		w_detail_modal,
	},
	data() {
		return {
			page_config,


			searchParams: {
				keyword: '',
				channelId: '',
				brandId: '',
				status: '',
				page: 1,
				pageNum: 10,
				productType: ''
			},
			filter_cates: [],
			cascader_cate: '',

			filter_status_cates: [{
				title: '全部状态',
				value: '',
			},
			{
				title: '上架',
				value: 1,
			},
			{
				title: '下架',
				value: -1,
			}],
			productType_cates: [{
				title: '全部',
				value: '',
			},
			{
				title: '基础商品',
				value: 1,
			},
			{
				title: '选配商品',
				value: 2,
			}, {
				title: '配件商品',
				value: 3,
			},],
			filter_brand_cates: [],
			cascader_brand_cate: '',

			// 修改状态弹窗
			dialogVisible: false,
			// 修改销量弹窗
			visibleDialog: false,
			sales: "",
			orders: "",


			status: "",
			// 选中的数据
			selectedRows: '',
		};
	},
	computed: {

	},
	watch: {
		cascader_cate(value) {
			this.$log('watch 分类', value)
			this.searchParams.channelId = value[value.length - 1]

			this.initQuery()
		},
		cascader_brand_cate(value) {
			this.$log('watch 分类', value)
			this.searchParams.brandId = value[value.length - 1]
			this.initQuery()
		},
	},
	created() {
		this.query_filters()
	},
	mounted() {
	},
	methods: {
		query_filters() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_getProductChannelList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.filter_cates = res.data.list;
				}
			})


			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_getProductBrandList",
				}
			}).then(res => {
				if (res.code == 200) {
					this.filter_brand_cates = res.data.list;
				}
			})
		},

		format_list_data(list) {
			list.forEach(v => {
				v.units = v.units[0].title
			})
		},
		doAddProduct() {
			this.$router.push('/product-form')
		},
		doAddBreed() {
			this.$router.push('/breed-form')
		},
		doAddPart() {
			this.$router.push('/part-form')
		},
		onSelectionChange(selectedRows) {
			this.selectedRows = selectedRows
			// console.log('父组件接收到的选中行数据：', selectedRows);
		},
		doStatus() {
			let ids = this.selectedRows.map(v => v.id)

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "product_plPStatus",
					id: ids.join(','),
					status: this.status
				}
			}).then(res => {
				if (res.code == 200) {
					this.setView()
					this.dialogVisible = false,
						this.$message({
							message: res.msg,
							type: 'success'
						});
				}
			})
		},
		doDel() {
			let ids = this.selectedRows.map(v => v.id)
			this.$confirm('确定删除选中?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_delPlProduct",
						ids: ids.join(','),
					}
				}).then(res => {
					if (res.code == 200) {
						this.doSearch()
						this.$message({
							message: res.msg,
							type: 'success'
						});
					}
				})
			}).catch(() => {

			});
		},
		// doRowEdit(row) {
		doRowOther(row, action_title) {
			if (action_title == '设置销量') {
				this.sales = row
				this.visibleDialog = true
			}
			if (action_title == '修改' && row.productType == 1) {
				this.$router.push({
					path: '/product-form',
					query: {
						id: row.id,
						ggid: row.inventoryId,
					}
				})
			} else if (action_title == '修改' && row.productType == 2) {
				this.$router.push({
					path: '/breed-form',
					query: {
						id: row.id,
						ggid: row.inventoryId,
					}
				})
			} else if (action_title == '修改' && row.productType == 3) {
				this.$router.push({
					path: '/part-form',
					query: {
						id: row.id,
						ggid: row.inventoryId,
					}
				})
			}
		},
		addSales(id) {
			if (this.orders == '') {
				this.$message.error('请设置销量')
			} else {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "product_setOrders",
						id: id,
						orders: this.orders
					}
				}).then(res => {
					if (res.code == 200) {
						this.$message({
							message: res.msg,
							type: 'success'
						});
						this.orders = ''
						this.visibleDialog = false
					}
				})
			}
		},
		//筛选相关
		select_cate_onchange() {
			this.initQuery()
		},
		emitTableRowLink(option) {
			let { row, field } = option
			if (field == 'title') {
				let url = row.productType == 3 ? (SITE_ROOT + '/accessoryDetail?id=' + row.inventoryId) : (SITE_ROOT + '/productDetail?id=' + row.inventoryId)
				window.open(url, '_blank')
			} else if (field == 'title2') {

			}
		}
	},
};
</script>

<style scoped lang="less">
// /deep/ .el-table table {
//   width: 100% !important;

//   thead {
//     th.el-table__cell {
//       background: #f8f8f8;
//       color: #000;
//     }
//   }
// }

.input-box {
	margin-bottom: 15px;
	position: relative;

	&.flex {
		display: flex;
		align-items: flex-start;
		align-items: center;

		.label {
			margin-bottom: 0;
		}
	}

	.label {
		margin-left: 40px;
		min-width: 80px;
		margin-bottom: 20px;
		font-size: 14px;
		color: #6e7285;
	}
}

.page-table-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

// 新增
.control-box {
	.flex-between();

	.control-left {
		.flex();

		.control-item {
			margin-right: 10px;
		}
	}

	.control-right {
		.flex();

		.action-item {
			margin-left: 10px;
		}
	}
}

.table-view {
	margin-top: 20px;
	margin-bottom: 20px;
}


// 表格工具栏
.table-util {
	.flex-between();

	.util-left {
		.flex();
		min-width: 100px;

		.util-items {
			.flex();

			.item {
				margin-right: 10px;
			}
		}
	}

	.util-right {}
}
</style>